<template>
  <el-dialog
    :title="!courseData.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="courseData" :rules="dataRule" ref="courseData" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="课程名称" prop="courseName">
      <el-input v-model="courseData.courseName" placeholder="课程名称"></el-input>
    </el-form-item>
    <el-form-item label="课程编码" prop="courseCode">
      <el-input v-model="courseData.courseCode" type="number" placeholder="课程编码"></el-input>
    </el-form-item>
    <el-form-item label="课时" prop="classHour">
      <el-input v-model.number="courseData.classHour" placeholder="课时"></el-input>
    </el-form-item>
    <el-form-item label="课程类型" prop="type">
      <el-select class="select" v-model="courseData.type" placeholder="请选择课程类型">
                    <el-option key="选修课" label="选修课" value="选修课"></el-option>
                    <el-option key="公共课" label="公共课" value="公共课"></el-option>
                    <el-option key="专业课" label="专业课" value="专业课"></el-option>

                </el-select>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { courseApi } from '@/api/course'

  export default {
    data () {
      return {
        visible: false,
        courseData: {
          id: null,
          courseName: '',
          courseCode: '',
          classHour: '',
          type: ''
        },
        dataRule: {
          courseName: [
            { required: true, message: '课程名称不能为空', trigger: 'blur' }
          ],
          courseCode: [
            { required: true, message: '课程编码不能为空', trigger: 'blur' }
          ],
          classHour: [
            { required: true, message: '课时不能为空', trigger: 'blur' },
            { type: 'number', message: '课时必须为数字值'}
          ],
          type: [
            { required: true, message: '课程类型不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        this.courseData.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['courseData'].resetFields()
          if (this.courseData.id) {
            courseApi.courseInfo(this.courseData.id).then(({course}) => {
            
                this.courseData = course

            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['courseData'].validate((valid) => {
          if (valid) {
            courseApi.saveOrUpdate(this.courseData,!this.courseData.id ? 'save' : 'update').then(data => {
              if (data && data.code === 20000) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.message)
              }
            })
          }
        })
      }
    }
  }
</script>
